<template>
  <div v-if="isRoad" class="home-content-right content-fade-right">
    <div class="analyse content-border-bg">
      <small-title
        title="综合道路信息"
        :close-icon="true"
        :darrow-icon="true"
        @handle-close="handleClose"
        @handle-darrow="handleDarrow"
      />
      <el-table
        stripe
        v-loading="tableLoad"
        :data="tableData"
        size="small"
        height="95%"
        @row-click="handleRow"
      >
        <el-table-column prop="roadName" align="center" label="道路名称" />
        <el-table-column prop="ghdldj" align="center" label="规划道路等级" />
        <el-table-column prop="ghWidth" align="center" label="规划红线宽度" />
        <el-table-column prop="xzWidth" align="center" label="现状红线宽度" />
        <el-table-column prop="jdcds" align="center" label="机动车道数" />
        <el-table-column align="center" label="建设完成情况" width="130">
          <template #default="scope">
            {{ finishedText[scope.row.finished] || '' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs, onMounted, nextTick } from 'vue';
  import smallTitle from '@/components/smallTitle/index.vue';
  import { getRoadBasicList } from '@/api/home';

  export default defineComponent({
    components: { smallTitle },
    emits: ['setting-out'],
    setup(props, { emit }) {
      const state = reactive({
        tableLoad: true,
        tableData: [],
        isRoad: false,
        finishedText: {
          0: '按规划形成',
          1: '未建',
          2: '规划与建设不一致',
          3: '在建',
          5: '规划外',
        },
      });
      const handleRow = (row) => {
        emit('setting-out', row)

      };
      const handleClose = () => {
        state.isRoad = false;
      };
      const handleDarrow = (type) => {
        let dom = document.getElementsByClassName('content-fade-right')[0];
        dom.style.right = type == 1 ? '30px' : '-43.5%';
      };
      const fetchData = (arr) => {
        state.tableLoad = true;
        const str = arr
          .map((i) => i.street)
          .filter((item) => item)
          .join(',');
        getRoadBasicList({ roadNames: str }).then((res) => {
          state.tableData = res.filter((currentValue, currentIndex, selfArr) => {
            return selfArr.findIndex((x) => x.roadName === currentValue.roadName) === currentIndex;
          });
          state.isRoad = true;
          state.tableLoad = false;
        });
      };
      return {
        ...toRefs(state),
        fetchData,
        handleRow,
        handleClose,
        handleDarrow,
      };
    },
  });
</script>
<style lang="less" scoped>
  .home-content-right {
    position: fixed;
    right: 30px;
    top: 145%;
    width: 45%;
    z-index: 3;
    .congestion-length {
      margin-bottom: 30px;
      .charts-box {
        height: 20vh;
      }
    }
    .analyse {
      height: 52vh;
      .tabs {
        height: 40px;
        margin: 15px 0 20px 0;
        display: flex;
        justify-content: center;
        .unchecked {
          cursor: pointer;
          flex: 1;
          text-align: center;
          line-height: 40px;
          background: url(@/assets/images/home/unchecked.png) no-repeat;
          background-size: 100% 100%;
        }
        .active {
          background: url(@/assets/images/home/active.png) no-repeat;
          background-size: 100% 100%;
        }
      }
      .imgs-box {
        width: 22px;
        height: 22px;
      }
    }
  }
</style>
